<template>
	<view class="contrastVue">
		<image class="quit absolute" src="../../static/close.png"  @click="quit()" :style="{ top: menuButtonTop + 'px', width: menuButtonHeight + 'px', height: menuButtonHeight + 'px'}"></image>
		<view class="videoVue fixed-auto flex-between">
			<view class="video">
				<video :src="uploadVideoUrl" object-fit="fill" :show-fullscreen-btn="false" controls style="width: 330rpx; min-height: 586rpx; height: auto; border-radius: 12rpx; display: block;"></video>
				<text>原视频</text>
			</view>
			<view class="video">
				<video :src="videoUrl" object-fit="fill" :show-fullscreen-btn="false" controls style="width: 330rpx; min-height: 586rpx; height: auto; border-radius: 12rpx;"></video>
				<text>AI视频</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				videoUrl: "", 
				uploadVideoUrl: "",
				menuButtonTop: 0,
				menuButtonHeight: 0
			}
		},
		onLoad(option) {
			this.videoUrl = option.videoUrl
			this.uploadVideoUrl = option.uploadVideoUrl
		},
		mounted() {
			let _this = this
			wx.getSystemInfo({
				success(res){    
					// 获取胶囊信息
					let menuButtonObject = wx.getMenuButtonBoundingClientRect();
					_this.menuButtonTop = menuButtonObject.top//胶囊距离顶部距离
					_this.menuButtonHeight = menuButtonObject.height//胶囊距离顶部距离
					console.log(_this.menuButtonTop, _this.menuButtonHeight)
				}
			})
		},
		methods: {
			quit(){
				this.videoUrl = ""
				this.uploadVideoUrl = ""
				this.$tools.back()
			}
		}
	}
</script>

<style lang="less" scoped>
	.quit {
		left: 30rpx;
		z-index: 999;
		background: #fff;
		border-radius: 50%;
	}
	.contrastVue {
		width: 100vw;
		height: 100vh;
		position: fixed;
		.videoVue {
			width: 690rpx;
			position: fixed;
			.video {
				width: 330rpx;
				height: auto;
				text-align: center;
				text {
					line-height: 88rpx;
					color: #000;
				}
			}
		}
	}
</style>